<script setup lang="ts">
  import arrowRight from '/images/webp/affiliate-program/arrow-right.webp'
  import contactIcon from '/images/webp/setting/contact_icon.webp'
  import excludedIcon from '/images/webp/setting/excluded_icon.webp'
  import logIcon from '/images/webp/setting/log_icon.webp'
  import passwordIcon from '/images/webp/setting/password_icon.webp'
  import verificationIcon from '/images/webp/setting/verification_icon.webp'

  const { t } = useI18n()
  definePageMeta({
    layout: 'header-back',
    title: 'setting_text'
  })

  const router = useRouter()

  // 菜单项
  const menuItems = ref([
    { id: 'contact', title: t('contact_text'), icon: contactIcon, path: '/setting/contact' },
    { id: 'password', title: t('change_password_text'), icon: passwordIcon, path: '/setting/change-password' },
    { id: 'verification', title: t('double_verification'), icon: verificationIcon, path: '/setting/two-factor-auth' },
    { id: 'exclusion', title: t('self_exclusion'), icon: excludedIcon, path: '/setting/self-exclusion' },
    { id: 'login-log', title: t('login_log'), icon: logIcon, path: '/setting/login-log' }
  ])

  // 菜单项点击处理
  const handleItemClick = (path: string) => {
    router.push(path)
  }
</script>

<template>
  <div class="setting-page">
    <!-- 设置菜单列表 -->
    <div class="menu-list">
      <div v-for="item in menuItems" :key="item.id" class="menu-item" @click="handleItemClick(item.path)">
        <div class="left">
          <BaseImage width="22px" :url="item.icon" />
          <div class="item-title">{{ item.title }}</div>
        </div>
        <div class="arrow-container">
          <BaseImage :url="arrowRight" class="arrow-icon" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .setting-page {
    height: 100vh;
    background-color: #232626;
    padding: 16px;
    color: #FFF;

    .header {
      display: flex;
      align-items: center;
      height: 3rem;
      padding: 0 1rem;
      background-color: #212525;
      position: relative;

      .back-btn {
        position: absolute;
        left: 1rem;
        display: flex;
        align-items: center;
      }

      .title {
        flex: 1;
        text-align: center;
        font-weight: 500;
      }
    }

    .menu-list {
      background: #323738;
      border-radius: 8px;

      .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.5rem;
        padding: 0 1rem;
        background-color: #323738;
        cursor: pointer;

        &:nth-child(1) {
          border-radius: 8px 8px 0 0;
        }

        &:last-child {
          border-bottom: none;
          border-radius: 0 0 8px 8px;
        }

        .left {
          display: flex;
          align-items: center;
          gap: 0.75rem;

          .item-title {
            font-size: 0.875rem;
            color: #FFF;
          }
        }

        .arrow-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 22px;
          height: 22px;
          background-color: #3b4041;
          border-radius: 4px;

          .arrow-icon {
            width: 7px;
            height: 11px;
          }
        }
      }
    }
  }
</style>
